<template>
  <!-- <div> -->
    <el-dialog title="柜员岗位设置"  :visible.sync="isShow" width="890px" @open="openCreate" @close="closeDialog"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
          <el-card>
            <div slot="header" class="clearfix">
              <span>查询条件</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div>
              <el-form :model="form"  size="mini" :rules="rules" label-position="left" ref="form">
                <el-row :gutter="10">
                    <el-col :sm="12">
                      <el-form-item label="用户编号"  prop="ID" >
                        <el-input v-model="form.ID" placeholder="加载失败" :disabled="true"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                      <el-form-item label="用户名称" prop="name" >
                        <el-input v-model="form.name" placeholder="加载失败" :disabled="true"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                      <el-form-item label="用户应用" prop="appName" >
                        <el-select v-model="form.appName" @change="chearTree">
                          <el-option v-for="item in appList" :key="item.value" :label="item.AppNum+'-'+item.AppName" :value="item.AppNum" :disabled="item.disabled">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :sm="12">
                      <el-form-item label="机构号" prop="branchId" >
                        <el-input v-model="form.branchId" placeholder=""></el-input>
                      </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                      <el-form-item prop="branchId" label="机构号">
                        <el-select v-model="form.branchId" @change="chearTree">
                          <el-option v-for="item in brnoList" :key="item.value" :label="item.BranchNum+'-'+item.BranchName" :value="item.BranchNum"
                            :disabled="item.disabled">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
              </el-form>
              <div style="text-align:center;">
                <el-button size="mini" type="primary" @click="queryTable">查询</el-button>
              </div>
            </div>
          </el-card>
          <el-card style="margin:10px 0 0 0;">
            <div slot="header" class="clearfix">
              <span>岗位信息</span>
            </div>
            <div>
              <el-tree :data="tableData"  v-model="form.post"
              show-checkbox
              ref="tree"
              :node-key="'postnum'"
              :props='{children: "perssionChild",label: "name"}'
              ></el-tree>
            </div>
          </el-card>
      </div>


      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addType">取 消</el-button>
        <el-button size="mini" type="primary" @click="queryFunc">确 定</el-button>
      </span>
    </el-dialog>
  <!-- </div> -->
</template>
<script>
import selectTree from "@/components/selectTree2/";
import branchList from "@/message/userManage/user/busBranch/busbranch-query";
import postInfo from "@/message/userManage/user/userPost/userpost-query";
import postSubmit from "@/message/userManage/user/userPost/userpost-submit";
import appListIns from "@/message/shared/appquery";
import request from "@/common/utils/request";


export default {
  props: {
    option: Object
  },
  components: { selectTree },
  data() {
    return {
      brnoList: [],
      appList: [],
      form:{
        ID:"",
        name:"",
        appName: "",
        branchId: "",
        post: []
      },
      loading: false,
      tableData: [],
      rules: {
        appName: [
          {
            required: true,
            message: "请选择应用1",
            trigger: "change"
          }
        ],
         branchId: [
          {
            required: true,
            message: "请选择机构号",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    addType() { //关闭弹窗事件，清楚表单验证
        this.option.isShow = false;
        this.appList =[];
        this.brnoList =[];
        this.form ={};
        this.tableData =[];
        this.$refs["form"].clearValidate(); //清楚表单验证
        this.$refs["form"].resetFields(); //清除表单验证
      },
    queryTable(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody = new postInfo();
          resBody.data.UserNum = this.form.ID;
          resBody.data.BranchNum = this.form.branchId;
          resBody.data.LegalPersonNum = this.$store.getters.LegalPersonNum;
          resBody.data.AppNum = this.form.appName;
          request(resBody)
            .then(response => {
              this.tableData = response.RspInfo.pageList ||[];
              if(this.tableData.length <1){

              }
              this.tableData.forEach(item => {
                item.name= item.postnum + "-" +item.postname
              });
              let list = response.RspInfo.pageList1 ||[];
              let setList =[];
              list.forEach(element => {
                setList.push(element.postnum);
              })
              this.$refs.tree.setCheckedKeys(setList);
              this.loading = false;
            })
            .catch(error => {
              this.loading = false;
              console.error("错误信息", error);
            });
            }
      })
    },
    initList() {
      //初始化支行列表
      this.brnoList =[];
      let resBody = new branchList();
      resBody.data.UserNum = this.form.ID;
      request(resBody)
        .then(response => {
          this.loading = false;
          this.brnoList = response.RspInfo.Result ||  [];
        })
        .catch(error => {
          this.loading = false;
          console.error("错误信息", error);
        });
    },
    initAppList() {
      //初始化应用列表
      this.appList =[];
      let resBody = new appListIns();
      resBody.data.UserNum = this.form.ID;
      request(resBody)
        .then(response => {
          this.appList = response.RspInfo.Result ||[];
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
          console.error("错误信息", error);
        });
    },
    openCreate() {
      //关闭弹窗清楚表单数据并清楚表单验证
      // this.$nextTick(()=>{
      //    if (this.$refs["form"] != undefined) {
      //   this.$refs["form"].resetFields(); //清楚表单验证
      //   this.$refs["form"].clearValidate(); //清楚表单验证
      // }
      // })
     this.$nextTick(()=>{
       this.loading = true;
       this.form.ID=this.option.currentRow.UserNum;
       this.form.name=this.option.currentRow.UserName;
       this.initList();
       this.initAppList();
       console.log(this.form.ID)
       this.loading = false;
     })

    },
    closeDialog(){
      this.appList =[];
      this.brnoList =[];
      this.form ={};
      this.tableData =[];
      //关闭弹窗清楚表单数据并清楚表单验证
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      if (this.$refs["form"] != undefined) {
      }
      this.$emit("refreshTable");
    },
    chearTree(){
      this.tableData =[]
    },
    queryFunc(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          if(this.tableData.length<1){
              this.$message({
              type: "error",
              message: "无岗位信息!"
            });
            this.loading = false;
            return;
          }
          let resBody = new postSubmit();
          resBody.data.UserNum = this.form.ID;
          resBody.data.BranchNum = this.form.branchId;
          resBody.data.LegalPersonNum = this.$store.getters.LegalPersonNum;
          resBody.data.AppNum = this.form.appName;
          let list = this.$refs.tree.getCheckedKeys();
          let data = [];
          if(list.length > 0){
            list.forEach(element => {
              data.push({"PostNum":element});
            })
          }
          resBody.data.postList = data;
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
              this.$message({
                type: "success",
                message: "保存成功!"
              });
                this.addType();
                this.loading = false;
              }else{
                this.loading = false;
                 this.$message({
                type: "error",
                message: response.SYS_HEAD.ReturnMessage
            });
              }
            })
            .catch(error => {
              this.loading = false;
              console.error("错误信息", error);
            });
            }
      })
    },
    // systemEmit() {
    //   this.$emit("systemEmit");
    // },
    closeSystem() {
      // this.$emit("refreshTable")
    }
  },
  computed: {
    isShow: {
      get() {
        return this.option.isShow;
      },
      set(value) {
        this.option.isShow = value;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
// .selectTree {
//   min-width: 150px;
// }

// .text {
//   font-size: 14px;
// }

// .item {
//   margin-bottom: 18px;
// }

// .dialog-text {
//   display: inline-block;
//   width: 100%;
//   text-align: center;
//   color: red;
// }

// .clearfix:before,
// .clearfix:after {
//   display: table;
//   content: "";
// }

.clearfix:after {
  clear: both;
}

// .el-card {
//   width: 100%;
// }

// .el-form-item {
//   margin-left: 30px;
// }

// .el-form-item1 {
//   margin-left: 10px;
// }

// .box2-button {
//   width: 80px;
// }

.el-card {
  overflow: inherit;
}
</style>
